<template>
  <div class="app-container preWorkBox">
    <div class="content">
      <div>
        <el-form
          ref="form"
          class="perForm"
          :model="form"
          :rules="rules"
          label-width="120px"
          size="medium"
        >
          <el-form-item
            label="异常分类"
            prop="typeId"
            style="flex: 0 0 50%"
            class="sort"
          >
            <el-cascader
              v-model="form.typeIds"
              :options="sortType"
              :props="{
                multiple: true,
                expandTrigger: 'hover',
                value: 'id',
                label: 'excepDesc',
                children: 'childList',
              }"
              style="width: 100%"
            >
            </el-cascader>
          </el-form-item>

          <el-form-item label="SN编码" prop="snCode" style="flex: 0 0 50%">
            <el-input
              disabled
              v-model="form.snCode"
              placeholder="请输入SN编码"
              @keyup.enter.native="handleGetWorkorderBySnCode"
            />
          </el-form-item>
          <!-- <el-form-item label="异常类型" prop="type">
            <el-radio-group v-model="form.type" @input="radiOChange">
              <el-radio label="0" value="0">物料异常</el-radio>
              <el-radio label="1" value="1">设备异常</el-radio>
              <el-radio label="2" value="2">质量异常</el-radio>
              <el-radio label="3" value="3">功能异常</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="异常描述" prop="exceptionId">
            <el-select v-model="form.exceptionId" style="width: 350px;" placeholder="请选择">
              <el-option
                v-for="item in remarkList"
                :key="item.id"
                :label="item.exceptionDescription"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item> -->
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="reset" style="font-size: 24px">重 置</el-button>
          <el-button type="primary" style="font-size: 24px" @click="submitForm"
            >提 交</el-button
          >
        </div>

        <!-- <div class="andengDiv">
          <el-button
            @click="startTextToSpeech(0)"
            :class="warningType == '0' ? 'flash red' : 'red'"
            :disabled="true"
            >物料</el-button
          >
          <el-button
            @click="startTextToSpeech(1)"
            :class="warningType == '1' ? 'flash yellow' : 'yellow'"
            :disabled="true"
            >设备</el-button
          >
          <el-button
            @click="startTextToSpeech(2)"
            :class="warningType == '2' ? 'flash green' : 'green'"
            :disabled="true"
            >质量</el-button
          >
          <el-button
            @click="startTextToSpeech(3)"
            :class="warningType == '3' ? 'flash blue' : 'blue'"
            :disabled="true"
            >功能</el-button
          >
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mobSubmit, baseList, addRepair } from "@/api/apppro/index";
import { addRecord, getTreeList } from "@/api/system/record";

export default {
  name: "abnormal",
  data() {
    return {
      tab: "1",
      form: {},
      rules: {
        typeIds: [
          { required: true, message: "异常分类ID不能为空", trigger: "blur" },
        ],
        snCode: [
          { required: true, message: "sn编码不能为空", trigger: "blur" },
        ],
      },
      remarkList: [],
      exceptionTypes: ["物料异常", "设备异常", "质量异常", "功能异常"],
      warningType: undefined, // 是否警告
      sortType: [],
    };
  },
  props: {
    formObj: Object,
    snCode: String,
  },
  created() {
    this.getTreeList();
    this.form.snCode = this.snCode;
  },
  methods: {
    statusfun(index) {
      return "process";
    },
    getList(exceptionType) {
      baseList({ exceptionType }).then((res) => {
        this.remarkList = res.rows || [];
        this.reset();
        console.log(res, "==========res===========");
      });
    },
    getTreeList() {
      getTreeList().then((res) => {
        let data = res.data ? res.data : [];
        data.forEach((item) => {
          item.childList.forEach((item2) => {
            delete item2.childList;
          });
        });
        this.sortType = data;
        // this.sortType = data.map(item => {
        //   item.childList = newItem.childList.map(item2 => {
        //     delete item2.childList
        //     return item2
        //   })
        //   return item
        // })
      });
    },
    submitForm() {
      this.$refs["form"].validate((valid) => {
        let params = {};
        params.repairResp = this.formObj;
        console.log(this.form, "??", this.formObj.workorderId);
        // return;
        addRecord({
          snCode: this.form.snCode,
          typeIds: this.form.typeIds.map(item=>item[1]),
          typeId: this.form.typeIds[0][1],
          workorderId: this.formObj.workorderId,
          processName: this.formObj.processName,
          processCode: this.formObj.processCode,
        }).then((response) => {
          this.$modal.msgSuccess("新增成功");
          // this.open = false;
          // this.getList();
        });
        // params.proExceptionSubmit = {
        //   exceptionType: this.form.type,
        //   exceptionId: this.form.exceptionId,
        //   exceptionDescription:
        //     this.remarkList.filter((_) => _.id == this.form.exceptionId)[0]
        //       ?.exceptionDescription || undefined,
        //   processName: this.formObj.processName,
        //   processCode: this.formObj.processCode,
        //   itemCode: this.formObj.productCode,
        //   itemName: this.formObj.productName,
        //   workstationCode: "WS0102",
        //   workorderCode: this.formObj.workorderCode,
        //   specification: this.formObj.productSpc,
        //   lineName: this.formObj.lineName,
        //   lineId: this.formObj.lineId,
        // workshopId: this.formObj.workshopId,
        //   workshopName: this.formObj.workshopName,
        //   workshopCode: this.formObj.workshopCode,
        // };
        // params.snCode = this.snCode;
        // console.log(this.formObj, "=====formObj====");
        // if (valid) {
        //   mobSubmit(params).then((res) => {
        //     console.log(res, "=======res=======");

        //     this.startTextToSpeech(this.form.type);
        //     this.$modal.msgSuccess(res.msg);
        //   });
        // }
      });
    },
    radiOChange(value) {
      this.getList(value);
    },
    reset() {
      this.form = {
        exceptionId: undefined,
        type: this.form.type,
      };
      // this.autoGenFlag = false;
      this.resetForm("form");
    },
    startTextToSpeech(index) {
      const text = this.exceptionTypes[index];
      this.warningType = index;
      for (let i = 0; i < 3; i++) {
        setTimeout(() => {
          const speech = new SpeechSynthesisUtterance();
          speech.text = text;
          window.speechSynthesis.speak(speech);
        }, i * 2000);
      }
      setTimeout(() => {
        this.warningType = "";
      }, 3 * 2000);
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.preWorkBox ::v-deep .el-icon-check::before {
  // display: none !important;
  content: "";
}

.perForm ::v-deep .el-form-item__label {
  font-size: 18px;
}

.perForm ::v-deep .el-radio__label {
  font-size: 18px;
}

.content {
  margin-top: 20px;
  text-align: center;
  display: flex;
  justify-content: center;

  div {
    font-size: 18px;
  }
}
.andengDiv {
  margin-top: 20px;
  button {
    font-size: 16px;
    position: relative;
    border-radius: 100%;
    height: 60px;
    width: 72px;
    z-index: 4;
    text-align: center;
    outline: none;
    color: white;
    background: #ec0c00;
    background: radial-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));
    text-shadow: 0 -1px 0 #c30707;

    border: 1px solid hsl(4, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(10, 100%, 50%), 0 2px 0 hsl(10, 100%, 20%),
      0 3px 0 hsl(8, 100%, 18%), 0 4px 0 hsl(0, 100%, 16%),
      0 5px 0 hsl(0, 100%, 14%), 0 6px 0 hsl(0, 100%, 12%);
  }
  .red {
    background: #ec0c00;
    background: radial-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));
    text-shadow: 0 -1px 0 #c30707;

    border: 1px solid hsl(4, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(10, 100%, 50%), 0 2px 0 hsl(10, 100%, 20%),
      0 3px 0 hsl(8, 100%, 18%), 0 4px 0 hsl(0, 100%, 16%),
      0 5px 0 hsl(0, 100%, 14%), 0 6px 0 hsl(0, 100%, 12%);
  }
  .yellow {
    background: #ece000;
    background: radial-gradient(hsl(54, 100%, 50%), hsl(53, 100%, 40%));
    text-shadow: 0 -1px 0 #c39a07;

    border: 1px solid hsl(47, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(57, 100%, 50%), 0 2px 0 hsl(53, 100%, 20%),
      0 3px 0 hsl(52, 100%, 18%), 0 4px 0 hsl(50, 100%, 16%),
      0 5px 0 hsl(58, 100%, 14%), 0 6px 0 hsl(52, 100%, 12%);
  }
  .green {
    background: #37ec00;
    background: radial-gradient(hsl(101, 100%, 50%), hsl(100, 100%, 40%));
    text-shadow: 0 -1px 0 #2dc307;

    border: 1px solid hsl(106, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(107, 100%, 50%), 0 2px 0 hsl(108, 100%, 20%),
      0 3px 0 hsl(115, 100%, 18%), 0 4px 0 hsl(118, 100%, 16%),
      0 5px 0 hsl(122, 100%, 14%), 0 6px 0 hsl(123, 100%, 12%);
  }
  .blue {
    background: #008eec;
    background: radial-gradient(hsl(203, 100%, 50%), hsl(201, 100%, 40%));
    text-shadow: 0 -1px 0 #077bc3;

    border: 1px solid hsl(203, 100%, 20%);

    box-shadow: inset 0 1px 0 hsl(201, 100%, 50%), 0 2px 0 hsl(212, 100%, 20%),
      0 3px 0 hsl(215, 100%, 18%), 0 4px 0 hsl(216, 100%, 16%),
      0 5px 0 hsl(218, 100%, 14%), 0 6px 0 hsl(220, 100%, 12%);
  }
}

.flash {
  background-color: red;
  color: #fff;
  -webkit-animation-name: flash;
  animation-name: flash;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-duration: 1s;
}

@-webkit-keyframes flash {
  /*只用修改这里就可以实现不同动画。例如大小闪烁transform: scale(.9);*/
  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

@keyframes flash {
  0%,
  100%,
  50% {
    opacity: 1;
    transform: scale(1);
  }

  25%,
  75% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}
</style>
